$nav_height: 40px;

.header {
  position: relative;
  width: 100%;
  height: $nav_height;
  font-size: 12px;
  background-color: #333;
  z-index: 999;

  .header_nav {
    width: 1226px;
    height: $nav_height;
    background-color: #333;

    .header_left {
      float: left;

      ul {
        li {
          list-style: none;
          height: 100%;
          line-height: $nav_height;
          color: #b0b0b0;
          float: left;
          cursor: pointer;

          &::after {
            content: '|';
            padding: 0 8px;
            color: #424242;
          }

          &:first-child {
            padding-left: 0;
          }

          &:last-child {
            &::after {
              content: '';
              padding: 0;
            }
          }

          &:hover {
            color: #fff;
          }
        }

        .app_down {
          position: relative;
          z-index: 2;

          .sanjiao {
            position: absolute;
            top: 20px;
            left: 25%;
            width: 0;
            height: 0;
            border: 10px solid;
            border-color: transparent transparent #fff;
            opacity: 0;
            transition: opacity 0.3s;
            z-index: 2;
          }

          .app_ewm {
            position: absolute;
            top: $nav_height;
            left: -50%;
            width: 124px;
            height: 0px;
            background-color: #fff;
            box-shadow: $box-shadow;
            transition: height 0.3s linear;
            overflow: hidden;
            z-index: 1;

            .ewm_img {
              width: 90px;
              height: 90px;
              display: block;
              margin: 17px auto;
            }

            .app_name {
              text-align: center;
              font-size: 14px;
              line-height: 1;
              color: #424242;
            }
          }

          &:hover {
            .sanjiao {
              opacity: 1;
            }

            .app_ewm {
              height: 156px;
            }
          }
        }
      }
    }

    .header_right {
      float: right;

      .user_box {
        float: right;
      }

      .cart_box {
        float: right;
        position: relative;

        .shopping_cart {
          position: relative;
          height: $nav_height;
          line-height: $nav_height;
          padding: 0 20px;
          background: #424242;
          color: #b0b0b0;
          margin-left: 20px;
          z-index: 2;
          cursor: pointer;
          transition: all 0.3s;

          i {
            margin-right: 10px;
            font-size: 16px;
          }

          &:hover {
            background-color: #fff;
            color: $theme-color;
          }
        }

        .shopping_cart_info {
          position: absolute;
          right: 0;
          top: $nav_height;
          width: 340px;
          height: 0px;
          background-color: #fff;
          box-shadow: $box-shadow;
          // 向下显示动画
          transition: height 0.3s linear;
          overflow: hidden;
          z-index: 1;

          .tips_text {
            line-height: 88px;
            text-align: center;
            font-size: 12px;
            color: #424242;
          }
        }

        &:hover {
          .shopping_cart_info {
            height: 88px;
          }
        }
      }
    }
  }
}